<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 网页可以根据不同设备或者窗口大小呈现出不同效果 -->
		<!-- 使用响应式布局，可以使一个网页适用于所有设备 -->
		<!-- 相应布局关键就是媒体查询，为不同设备，或设备不同状态分别设置样式 -->
	</body>
</html>
<style type="text/css">
	/* 使用媒体查询@media 查询规则（）
		媒体类型： all所有设备 print 打印设备 screen 带屏幕的设备 speech屏幕阅读器
		媒体特性 width视口宽度 height视口高度 min-width视口最小宽度 max-width视口最大宽度*/
	/* 小于768超小屏幕 大于768小屏幕 大于992中型屏幕 大于1200大屏幕 */
	/* ,或 and与 */
	@media (min-width:768px) and (max-width:992px){
		body{
			background-color: #00FFFF;
		}
	}
/* 	@media screen{
		body{
			background-color: #0000FF;
		}
	} */
	@media print{
		body{
			background-color: #00FFFF;
		}
	}
</style>